#app {
    height: 100vh;
    overflow: auto;
    background-color: #f5f6fa;
    .layout {
        width: 100%;
        height: 100%;

        // fixed head
        &.fixed {
            padding-top: calc($--head-navbar-height + $--head-tabs-height);
        }

        // 侧边栏
        .layout-aside {
            width: $--aside-width;
            height: calc(100vh - $--head-navbar-height);
            position: fixed;
            top: $--head-navbar-height;
            left: 0;
            bottom: 0;
            z-index: 2000;
            overflow: hidden;
            transition: $--base-transition;
            .aside-wrap {
                width: 100%;
                height: 100%;
                background-color: $--menu-bg;
                padding: 10px 0;
            }
        }

        // 主内容
        .layout-main {
            min-height: 100%;
            margin-left: $--aside-width;
            transition: $--base-transition;
            // main-head
            .main-head {
                width: 100%;
                // box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
                &.fixed {
                    position: fixed;
                    top: 0;
                    right: 0;
                    width: 100%;
                    transition: $--base-transition;
                    z-index: 1998;
                }
            }
            // main-content
            .main-content {
                width: 100%;
                height: 100%;
                padding: $--main-content-padding;
                .wrap {
                    width: 100%;
                    &.normal {
                        padding: $--main-content-wrap-padding;
                        border-radius: 10px;
                        background-color: #ffffff;
                        .wrap-form {
                            margin: 0 0 10px 0;
                            .left-panel {
                                display: flex;
                                flex-wrap: wrap;
                                align-items: center;
                                justify-content: flex-start;
                                min-height: 32px;
                            }
                            .right-panel {
                                display: flex;
                                flex-wrap: wrap;
                                align-items: center;
                                justify-content: flex-end;
                                min-height: 32px;
                            }
                            .left-panel {
                                .el-form {
                                    .el-form-item--small.el-form-item {
                                        margin-bottom: 10px;
                                    }
                                }
                            }
                            .right-panel {
                                .el-button {
                                    margin: 0 10px 10px 0 !important;
                                }
                            }
                            .panel-item {
                                display: flex;
                                flex-wrap: wrap;
                                align-items: center;
                                min-height: 32px;
                                &.search {
                                    .el-form {
                                        .el-form-item--small.el-form-item {
                                            margin-bottom: 10px;
                                        }
                                    }
                                }
                                &.operate {
                                    .el-button {
                                        margin: 0 10px 10px 0 !important;
                                    }
                                }
                            }
                        }
                    }
                    // 新增自定义样式
                    &.custom {
                        .wrap-card {
                            border-radius: 12px;
                            background-color: #ffffff;
                            &:not(:nth-child(1)) {
                                margin-top: 16px;
                            }
                        }
                    }
                }
            }
        }
    }
}

// el-menu
.el-menu {
    user-select: none;
    border-right: 0;
    background-color: $--menu-bg;
    .el-menu-item:focus,
    .el-menu-item:hover {
        color: $--menu-hover-text;
        background: $--menu-hover-bg;
    }
    .el-menu-item.is-active {
        color: $--menu-active-text;
        background: $--menu-actived-bg;
        border-left: 2px solid #db2029;
    }
    .el-menu-item {
        color: $--menu-text;
        height: 50px;
        line-height: 50px;
        position: relative;
        border-left: 2px solid #ffffff;
        transition: all 0.3s ease;
        i {
            color: inherit;
        }
        i + span {
            margin-left: 5px;
        }
    }
}

// el-submenu
.el-submenu {
    .el-submenu__title:hover {
        color: $--menu-hover-text;
        background: $--menu-hover-bg;
    }
    .el-submenu__title {
        color: $--menu-text;
        height: 50px;
        line-height: 50px;
        i {
            color: inherit;
            &.el-submenu__icon-arrow {
                margin-top: -7px;
            }
        }
        i + span {
            margin-left: 5px;
        }
    }
}

// 滚动条隐藏
.el-scrollbar__wrap {
    overflow-x: hidden;
}
